<!--
 * @Author: Haochen
 * @Date: 2021-12-10 10:39:22
 * @LastEditTime: 2021-12-10 11:35:15
 * @FilePath: \students-system\src\components\Counter.vue
-->
<template>
  <div>
    <h1>{{ $store.state.num }}</h1>
    <div class="row">
      <button @click="increment">+</button>
      <input type="text" v-model.lazy="inputData" />
      <button @click="decrement">-</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputData: 0,
    };
  },
  methods: {
    increment() {
      this.$store.commit('INCREMENT');
    },
    decrement() {
      this.$store.commit('DECREMENT');
    },
  },
  watch: {
    inputData() {
      this.$store.commit('INPUTCOUNT', this.inputData);
    },
  },
};
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
}

input {
  width: 50px;
  height: 30px;
}

button {
  width: 50px;
  height: 30px;
  font-size: 24px;
}
</style>
